@charset "UTF-8";

// flex布局

// （%不会将选择器解析到css文件）
// 主轴左对齐， 交叉轴居中对齐
%flex-lc {
	display: flex;
	justify-content: flex-start; /* 默认就是左对齐 */
	align-items: center;
}

// 主轴右对齐， 交叉轴居中对齐
%flex-rc {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

// 主轴两端对齐， 交叉轴居中对齐
%flex-bc {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

// 主轴两侧间隔相等， 交叉轴居中对齐
%flex-ac {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

// 主轴居中对齐， 交叉轴居中对齐
%flex-cc {
	display: flex;
	justify-content: center;
	align-items: center;
}

// 主轴居中对齐， 交叉轴居中对齐， 主轴方向是交叉轴方向
%flex-ccc {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}

// 主轴两端对齐， 交叉轴上对齐， 主轴方向是交叉轴方向
%flex-blc {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
}